<template>
	<view class="container">
		<top-back-navbar position="fixed" title="商品详情" :background="pageInfos.navBg" :color="pageInfos.navColor"></top-back-navbar>
		<view class="contents">
			<view class="swiper_box">
				<view class="part" v-if="thumb == ''" style="height: 640rpx;">
					<swiper class="banner-box" indicator-dots autoplay indicator-active-color="#ff5555" circular
						:interval="5000" :duration="300" indicator-color="rgba(0,0,0,.3)">
						<swiper-item v-for="(item, index) in bannerList" :key="index">
							<image class="banner-image" :src="item" mode="aspectFill" lazy-load></image>
						</swiper-item>
					</swiper>
				</view>
				<view v-if="thumb != ''" class="thumb">
					<image :src="thumb" mode="widthFix"></image>
				</view>
			</view>
			<view class="goods_content">
				<view class="goods-prices-group">
					<view class="goods_title text-overflow">{{data.title}}</view>
					<view class="prices">
						<text class="prices-icon">￥</text>
						<text class="new_price">{{data.marketprice}}</text>
					</view>
				</view>
			</view>
			<view class="goods-tab-group"> 
				<view class="goods-tab-box" @click="tabActive=1">
					<view class="goods-tab-item" :class="[tabActive==1?'goods-tab-item-active':'goods-tab-item-import']">商品详情</view>  
				</view>
				<view class="goods-tab-box" @click="tabActive=2">
					<view class="goods-tab-item" :class="[tabActive==2?'goods-tab-item-active':'goods-tab-item-import']">参数</view>
				</view>
			</view>
			<view class="goods-detail-group"> 
				<view class="goods-detail-name">
					<view class="goods-detail-text">{{tabActive==1?'商品详情':'参数'}}</view>
				</view>
			</view>
			<view class="goods-detail-content" v-if="tabActive==1">
				<rich-text :nodes="content"></rich-text>
			</view>
			<view class="goods-detail-content" v-if="tabActive==2">
				<view class="goods-detail-list" v-for="(item,index) in data.params" :key="index">
					<view class="goods-detail-title">{{item.title}}：</view> 
					<view class="goods-detail-infos">{{item.value}}</view>
				</view>
			</view>
			<!-- <view class="scroll_box">
				

				<view class="goods_content">
					<view class="titles u-f-ac u-f-jsb">
						<view>
							<view class="goods_title text-overflow">{{data.title}}</view>
							<view class="u-f prices">
								<text>￥</text>
								<view class="new_price">{{data.marketprice}}</view>
							</view>
						</view> -->
						<!-- <view class="goods_title_right u-f-ajc u-f-column">
              <u-icon name="share" color="#115763" size="50"></u-icon>
              <text style="font-size: 26rpx;">分享</text>
            </view>
						<view>
							<view v-if="data.ck_price">创客价：{{data.ck_price}}</view>
							<view v-if="data.ck_price">区代价：{{data.qd_price}}</view>
							<view v-if="data.ck_price">市代价：{{data.sd_price}}</view>
						</view>
					</view>
					<view class="totals u-f-ac u-f-jsb">
						<view>快递：0包邮</view>
						<view class="flex">
							快递：{{data.dispatchprice}}
							<view class="kd" v-if="isNaN(data.dispatchprice)">
								<view v-if="data.type == 1&&data.isverify !=2">{{min}}~{{max}}</view>
							</view>
							<view class="kd" v-else-if="data.type == 1&&data.isverify !=2">
								<view class="" v-if="data.dispatchprice == 0">
									包邮
								</view>
								<view v-else>{{dispatchprice}}</view>
							</view>
						</view>
						<view>销量：{{data.sales}}</view>
					</view>
					<view class="xiaofeizhi u-f u-f-column">
						<view>消费值：{{data.jfz}}</view>
						<view>贝值：{{data.fenhongzhi}} + 股值：{{data.tihuoquan}}</view>
					</view>
				</view>

			</view> -->

			<!-- <view class="tab" v-if="params? true:false">
				<uni-segmented-control :current="current" :values="tabs" @clickItem="onClickItem" style-type="text"
					active-color="#175e3c"></uni-segmented-control>
				<view class="content">
					<view v-show="current === 0">
						<rich-text :nodes="content"></rich-text>
					</view>
					<view v-show="current === 1">
						<scroll-view scroll-y="true" style="height: 500upx;">
							<view class="params webkit" v-for="(item,index) in data.params" :key="index">
								<view class="t">{{item.title}}</view>
								<view class="v flex">{{item.value}}</view>
							</view>
						</scroll-view>

					</view>
				</view>
			</view>
			<view class="goods-detail" v-else>
				<rich-text :nodes="content"></rich-text>
			</view> -->


		</view>
		
		<!-- 底部菜单 -->
		<view class="foot webkit u-f-ac">
			<view class="item u-f-ajc u-f-column" @tap="fav">
				<image :src="love"></image>
				<text class="text">关注</text>
			</view>
			<view class="item u-f-ajc u-f-column" @click="cart">
				<image src="../../static/cart.png"></image>
				<text class="text">购物车</text>
				<uni-badge v-if="data.cartCount > 0 " :text="data.cartCount" type="danger"></uni-badge>
			</view>
			<view class="btn flex u-f-ajc" @click="buygoods" data-type="0">加入购物车</view>
			<view class="btn flex buy u-f-ajc" @click="buygoods" data-type="1" :style="{backgroundColor:pageInfos.btnBg,color:pageInfos.btnColor}">立即购买</view>
		</view>


		<view class="modal" :class="{in:picker}">
			<view class="city-picker">
				<view class="t">{{cityText}}</view>
				<view class="g">
					<view class="cell">
						<view v-for="(item,index) in data.citys" :key="index">{{item}}</view>
					</view>
				</view>
				<button type="primary" @tap="cityPicker">确定</button>
			</view>
		</view>
		<view class="mask" :class="{visible:picker}" v-bind:style="{ display: display}" @tap="cityPicker"></view>

		<view class="mask" v-if="mask" :class="{active:buy}" @click="closeModal"></view>
		<view class="modal" :class="{in:buy}">
			<view class="option">
				<view class="inner">
					<view class="goodsinfo">
						<image src="../../static/close.png" mode=""
							style="width: 40upx;height: 40upx;position: absolute;right: 24upx;top: 10pux;"
							@click="closeModal">
						</image>
						<view style="display: flex;">
							<image class="image" :src="data.thumb" mode=""></image>
							<view style="flex:1;display: flex;flex-direction: column;justify-content: space-between;">
								<view class="topinfo" style=""></view>
								<view class="topinfo" style="color: #f55;">￥{{skuPrice || data.marketprice}}</view>
							</view>
						</view>
						<view class="topinfo" v-if="options.options">
							<view >{{optionsText}}</view>
						</view>
					</view>
					<view>
						<view v-for="(item,index) in optionlist" :key='index' class="optionlist">
							<view style="line-height: 80upx;">{{item.title}}</view>
							<view class="filter-body-section-body style-flex style-flex-wrap">
								<axb-check-box ref="radio3" :list="item.list" @change="radioChangeType($event,item.id)">
								</axb-check-box>
							</view>
						</view>
						<view class="webkit optionlist" style="padding-top: 20upx;">
							<view>数量：</view>
							<view class="flex"></view>
							<view>
								<!-- <uni-number-box :min="item.minbuy" :max="item.maxbuy" :value="item.total" v-on:change="update($event,item.id)"></uni-number-box> -->
								<uni-number-box :min="minbuy" :max="maxbuy" :value="numvalue" v-on:change="update">
								</uni-number-box>
							</view>
						</view>
					</view>
					<view style="padding:40rpx;">
						<button type="primary" :style="{backgroundColor:pageInfos.btnBg,color:pageInfos.btnColor}" style="border-radius: 0;border-radius: 100upx;" @click="submit">确定</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import uniSegmentedControl from '../../components/uni-segmented-control.vue';
	import uniBadge from '../../components/uni-badge.vue';
	import uniNumberBox from '../../components/uni-number-box.vue';
	import axbCheckBox from '../../components/axb-checkbox/axb-checkbox.vue';
	export default {
		data() {
			return {
				tabs: [
					'详情',
					'参数'
				],
				tabActive:1,
				options: [],
				optionsText: '请选择规格',
				data: [],
				bannerList: [],
				coin: [],
				params: false,
				picker: false,
				dispatchprice: "",
				thumb: "",
				max: "",
				min: "",
				love: "../../static/love.png",
				content: "",
				current: 0,
				display: 'none',
				cityText: "只配送区域",
				favorite: 0,
				color: "#999",
				goodsid: 'asd',
				buy: false,
				mask: false,
				subBtn: 0,
				total: 1,
				minbuy: 1,
				maxbuy: 999,
				numvalue: 1,
				classes: [],
				optionlist: [],
				openid: '',
				oid: '',
				options2: [],
				skuPrice: '',
				pageType:'',
				pageInfos:{},
				playModel:''
			};
		},
		onLoad: function(e) {
			this.goodsid = e.goodsid;
			this.pageType=e.type || 'jb';
			this.playModel=e.playModel || '';
			this.pageInfos=this.$GetPageInfo(this.pageType)
			console.log(e,this.pageInfos);
			uni.showLoading()
			this.$GetOpenid().then(res=>{
				this.oid = "&openid=" + res
				this.openid = res
				this.setAjax()
			})
		},
		components: {
			uniSegmentedControl,
			uniBadge,
			uniNumberBox,
			axbCheckBox
		},
		methods: {
			setAjax() {
				uni.request({
					url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=goods.detail&id=' +
						this.goodsid + '&app=1' + this.oid,
					success: res => {
						console.log(res)
						uni.hideLoading()
						this.data = res.data;
						this.coin = res.data.coin;
						if (Array.isArray(res.data.thumbs) && res.data.thumbs.length > 0) {
							this.bannerList = res.data.thumbs;
						} else {
							this.thumb = res.data.thumb;
						}
						if (res.data.params) {
							this.params = true;
						}
						if (this.lodash.isPlainObject(res.data.dispatchprice)) {
							this.max = res.data.dispatchprice.max.toFixed(2);
							this.min = res.data.dispatchprice.min.toFixed(2);
						} else {
							var dis = res.data.dispatchprice
							this.dispatchprice = this.lodash.isNumber(Number(dis))?parseFloat(dis).toFixed(2):0.00
						}
						if (res.data.onlysent == 0) {
							this.cityText = "不配送区域"
						}
						this.favorite = res.data.isFavorite
						if (this.favorite == 1) {
							this.love = '../../static/love_fill.png'
							this.color = '#f55'
						}
						var content = res.data.content;
						if(this.lodash.isString(content)){
							content = content.replace(/data-lazy/g, "src");
							content = content.replace(/style="/g, 'style="width:100%;')
							this.content = content;
						}
						
					},
					fail: () => {},
					complete: () => {}
				});
				if (this.oid != "") {
					uni.request({
						url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=goods.picker&app=1&id=' +
							this.goodsid,
						method: 'POST',
						data: {
							'openid': this.openid
						},
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						success: res => {
							uni.hideLoading()
							if (res.data.result.goods.maxbuy == 0) {
								this.maxbuy = Number(res.data.result.goods.total)
							} else {
								this.maxbuy = Number(res.data.result.goods.maxbuy)
							}
							if (res.data.result.goods.minbuy != 0) {
								var minbuy = Number(res.data.result.goods.minbuy)
								this.minbuy = minbuy
								this.numvalue = minbuy
								this.total = minbuy
							}
							this.options = res.data.result
							this.options2 = res.data.result.options
							console.log(this.options)
							var arry = []
							for (var i in this.options.specs) {
								var a = []
								var v = {
									id: '',
									list: [],
									title: ''
								}
								for (var j in this.options.specs[i].items) {
									var ary = {
										name: '',
										value: '',
										checked: 0
									}
									ary['name'] = this.options.specs[i].items[j].title
									ary['value'] = this.options.specs[i].items[j].id
									a.push(ary)
								}
								v['list'] = a
								v['id'] = this.options.specs[i].id
								v['title'] = this.options.specs[i].title
								arry.push(v)
							}
							this.optionlist = arry
						},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			cart() {
				if (this.oid == '') {
					uni.showModal({
						content: "请先登录",
						confirmText: "确定",
						cancelText: "取消",
						success: res => {
							if (res.confirm) {
								uni.navigateTo({
									url: '../login/login'
								});
							}
						},
					})
				} else {
					uni.reLaunch({
						url: '../cart/cart'
					});
				}
			},
			update(e) {
				this.total = e
			},
			radioChangeType(val, id) { //选择规格
				if (val == null) {
					val = ''
				}
				this.classes[id] = val
				console.log(this.classes)
				let specs = ''
				for (var i in this.classes) {
					specs = specs + '_' + this.classes[i]
				}
				console.log(specs)
				let finds = this.options2.find(item => item.specs == specs.substr(1))
				if (finds) this.skuPrice = finds.marketprice
				console.log(this.skuPrice)
			},
			buygoods(e) { //点击购买或者购物车按钮
				if (this.oid == '') {
					uni.showModal({
						content: "请先登录",
						confirmText: "确定",
						cancelText: "取消",
						success: res => {
							if (res.confirm) {
								uni.navigateTo({
									url: '../login/login'
								});
							}
						},
					})
				} else {
					this.mask = true
					setTimeout(() => {
						this.buy = true
					}, 100)
					if (e.currentTarget.dataset.type == 1) {
						this.subBtn = 1
					} else {
						this.subBtn = 2
					}
				}
			},
			onClickItem(index) {
				if (this.current !== index) {
					this.current = index;
				}
			},
			cityPicker() {
				this.picker = false;
				this.display = 'none';
			},
			showPicker() {
				this.display = 'block';
				this.picker = true
			},
			fav() { //点击关注
				if (this.oid == '') {
					uni.showModal({
						content: "请先登录",
						confirmText: "确定",
						cancelText: "取消",
						success: res => {
							if (res.confirm) {
								uni.navigateTo({
									url: '../login/login'
								});
							}
						},
					})
				} else {
					if (this.favorite == 1) {
						this.favorite = 0
						this.love = '../../static/love.png'
						this.color = '#999'
					} else {
						this.favorite = 1
						this.love = '../../static/love_fill.png'
						this.color = '#f55'
					}
					uni.request({
						url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.favorite.toggle&app=1&id=' +
							this.goodsid + '&isfavorite=' + this.favorite,
						method: 'POST',
						data: {
							'openid': this.openid
						},
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						success: res => {
							if (res.data.result.isfavorite == true) {
								uni.showToast({
									title: "关注成功"
								})
							}
						},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			closeModal() { //关闭modal
				this.buy = false
				setTimeout(() => {
					this.mask = false
				}, 300)

			},
			submit() { //提交
				var specs = '',
					optionid = 0
				for (var i in this.classes) {
					specs = specs + '_' + this.classes[i]
				}
				for (var j in this.options.options) {
					if ('_' + this.options.options[j].specs == specs) {
						optionid = this.options.options[j].id
					}
				}
				if (optionid == 0 && this.options.options) {
					uni.showToast({
						title: '请选择规格',
						icon: "none"
					});
				} else if (this.subBtn == 1) {
					//购买
					uni.navigateTo({
						url: '../order/create/create?id=' + this.goodsid + '&optionid=' + optionid + '&total=' +
							this.total+'&type='+this.pageType+(this.playModel == 'ycth'?'&playModel='+this.playModel:'')
					});
				} else if (this.subBtn == 2) {
					// 加入购物侧
					uni.request({
						url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.cart.add&app=1',
						method: 'POST',
						data: {
							openid: this.openid,
							id: this.goodsid,
							optionid: optionid,
							total: this.total,
							diyformdata: false
						},
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						success: res => {
							this.closeModal()
							setTimeout(() => {
								uni.showToast({
									title: '加入购物车成功',
									icon: "none"
								});
								this.setAjax()
							}, 300)
						},
						fail: () => {},
						complete: () => {}
					});
				}
				this.closeModal()
			}
		}
	}
</script>


<style lang="scss">
	page {
		background-color: #f2f5fa;
	}

	.container {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
	}
	
	.goods-tab-group{
		display: flex;
		align-items: center;
		background-color: #ffffff;
		padding-bottom:8rpx;
		.goods-tab-box{
			width: 50%;
			padding:0 5%;
			.goods-tab-item{
				height: 90rpx;
				position: relative;
				line-height: 90rpx;
				font-size: 30rpx;
				text-align: center;
			}
			.goods-tab-item-import{ 
				color:#231815;
			}
			.goods-tab-item-active{
				color:#8e8e8e;
				position: relative;
				&::after{
					content: '';
					position: absolute;
					bottom:0;
					left:50%;
					width: 90%;
					height: 6rpx;
					border-radius: 6rpx;
					transform: translateX(-50%);
					background-color: #8e8e8e;
				}
			}
		}
	}  
	
	.goods-detail-group{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100rpx;
		.goods-detail-name{
			width: 50%;
			height: 100%;
			position: relative;
			&::after{
				content:'';
				width: 100%;
				position: absolute;
				top: 50%;
				left: 0;
				height: 3rpx;
				background-color: #dadada;
			}
			.goods-detail-text{
				color:#7f7f80;
				padding:0 30rpx;
				font-size: 30rpx;
				position: absolute;
				top: 50%;
				left:50%;
				transform: translate(-50%,-50%);
				background-color:#f2f5fa;
				white-space: nowrap;
				z-index: 10;
			}
		}
	}  
	
	.goods-detail-content{
		padding:10rpx;
		background-color: #ffffff;
	}

	.goods_content {
		.goods-prices-group{
			padding:20rpx 40rpx;
			.goods_title {
				font-size: 36rpx;
				font-weight: bold;
			}
			.new_price {
				font-size: 36rpx;
				color:#c5000b;
			}
			.prices-icon{
				font-size: 36rpx;
				color:#c5000b;
			}
		}
	
		.totals {
			padding: 0 20rpx;
			font-size: 26rpx;
		}
	
		.xiaofeizhi {
			justify-content: center;
			width: 100%;
			height: 140rpx;
			// background: url(/static/jibei/goods/kuang3.png) no-repeat 0 0;
			background-size: cover;
			padding: 20rpx 40rpx 0;
	
			view {
				font-size: 34rpx;
				color: #FFF0D0;
			}
		}
	}
	
	.goods-detail-list{
		display: flex;
		align-items: center;
		background-color: #ffffff;
		border-bottom:1px solid #dadada;
		padding:0 20rpx;
		.goods-detail-title{
			height: 90rpx;
			width: 20%;
			line-height: 90rpx;
			color:#7f7f80;
			font-size: 30rpx;
		}
		.goods-detail-infos{
			height: 90rpx;
			width: 80%;
			line-height: 90rpx;
			color:#7f7f80;
			font-size: 30rpx;
		}
	} 
	.scroll_box {
		width: 100%;
		height: 1100rpx;
		// background: url(../../static/jibei/goods/kuang2.png) no-repeat 0 0;
		background-size: cover;
		box-sizing: border-box;
		padding: 40rpx 54rpx;
		color: #115763;
	}

	.swiper_box {
		width: 100%;
		border-radius: 20rpx;
		overflow: hidden;

		// background-color: skyblue;
		// opacity: 0.4;
		.part {
			width: 100%;
			height: 100%;
			overflow: hidden;
			position: relative;
		}

		.banner-box {
			width: 100%;
			height: 100%;
			height: 750upx;
		}

		.banner-image {
			width: 100%;
			height: 100%;
		}

		.thumb.part {
			width: 100%;
			height: 100%;
			overflow: hidden;
			position: relative;
		}

		.banner-box {
			width: 100%;
			height: 100%;
		}

		.thumb {
			width: 100%;
			height: 100%;
		}

		.thumb image {
			width: 100%;
			height: 100%;
		}
	}

	

	.foot {
		position: fixed;
		bottom: 0;
		height: 110rpx;
		width: 100%;
		background: #ffffff;
		border-top: 1px solid #ffffff;
		z-index: 100;
	}

	.foot .item {
		width: 130upx;
		position: relative;
	}

	.foot .item image {
		width: 50upx;
		height: 50upx;
		display: block;
	}

	.foot .item .text {
		display: block;
		text-align: center;
		font-size: 22upx;
		color: #7f7f80;
	}

	.foot .btn {
		text-align: center;
		height: 100%;
		color: #7f7f80;
		font-size: 34rpx;
		background: #dbdcdc;
	}

	.foot .btn.buy {
		background: #32539b;
		color: #ffffff;
	}
	
	.modal {
	  position: fixed;
	  width: 100%;
	  z-index: 1001;
	  left: 0;
	  bottom: -80upx;
	  -webkit-transform: translate3d(0, 100%, 0);
	  transform: translate3d(0, 100%, 0);
	  -webkit-transition-property: -webkit-transform;
	  transition-property: transform;
	}
	
	.modal.in {
	  -moz-transition-duration: 300ms;
	  -webkit-transition-duration: 300ms;
	  transition-duration: 300ms;
	  -webkit-transform: translate3d(0, 0, 0);
	  transform: translate3d(0, 0, 0);
	}
	
	.city-picker .t {
	  color: #333;
	  font-size: 0.75rem;
	  padding: 0.5rem 0.7rem;
	  text-align: center;
	  background: white;
	}
	
	.city-picker .g {
	  background-color: #fff;
	  line-height: 1.4;
	  font-size: 0.8rem;
	  overflow: hidden;
	  position: relative;
	  overflow-y: auto;
	  max-height: 485px;
	  padding: 12px;
	}
	
	.city-picker .g .cell view {
	  font-style: normal;
	  display: inline-block;
	  border: 1px solid #ebebeb;
	  height: 1.2rem;
	  line-height: 1.2rem;
	  padding: 0 0.5rem;
	  margin: 0 0.1rem 0.2rem 0;
	  font-size: 0.6rem;
	  border-radius: 0.15rem;
	}
	
	.city-picker button {
	  background: #f55;
	  border-radius: 0;
	  font-size: 15px;
	  height: 45px;
	  line-height: 45px;
	}
	
	.city-picker button:after {
	  border: 0;
	}
	
	.mask {
	  position: fixed;
	  width: 100%;
	  height: 100%;
	  left: 0;
	  opacity: 0;
	  top: 0;
	  z-index: 1000;
	  -moz-transition-duration: 400ms;
	  -webkit-transition-duration: 400ms;
	  transition-duration: 400ms;
	  background-color: rgba(0, 0, 0, 0.4);
	}
	
	.mask.active {
	  opacity: 1;
	}
	
	.option {
	  height: auto;
	  width: 100%;
	  padding-bottom: 80upx;
	  z-index: 1001;
	}
	
	.topinfo {
	  font-size: 28upx;
	  height: 36upx;
	  line-height: 36upx;
	}
	
	.inner {
	  background: #fff;
	  border-top: 1px solid #eee;
	  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
	  border-radius: 20rpx 20rpx 0 0;
	}
	
	.goodsinfo {
	  padding: 50upx 20upx 20upx 20upx;
	  position: relative;
	}
	
	.goodsinfo .image {
	  height: 168upx;
	  width: 168upx;
	  background: #fff;
	  padding: 4upx;
	  border: 2upx solid #eee;
	  border-radius: 4upx;
	}
	
	.optionlist {
	  padding: 20upx;
	  padding-top: 8upx;
	}
</style>
